<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<image class="indexBg" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/indexBg1.png" mode="aspectFill"></image>
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<returnIcon></returnIcon>
			<image :src="shopsDetail.background_image?shopsDetail.background_image:'/static/index/headerImg.png'"
				class="headerImg" mode="widthFix"></image>
		</view>
		<view class="storeLay">
			<view class="storeHeader">
				<view class="headerLeft">
					<view class="title">
						{{shopsDetail.name||""}}
					</view>
					<view class="hotNum">
						<image src="/static/index/hotIcon2.png" class='hotIcon' mode=""></image>
						{{shopsDetail.hot_score||0}}
					</view>
				</view>
				<view class="headerRight">
					<image :src="shopsDetail.avatar" mode="aspectFit" class="userImg"></image>
					<image src="/static/index/hiIcon.png" class="hiIcon" mode="widthFix"></image>
					<view class="bnt" @click="shopsFollow">
						{{is_followed==0?'未关注':'已关注'}}
					</view>
				</view>
			</view>
			<!-- <view class="subTitle">
				最爱喵喵hf！
			</view>
			<view class="txt">
				涵盖动漫角色、卡通人物、萌宠、动物、人物、缩小版场景、日本特色物品、食物等各种题材，满足了不同人群的喜好
			</view> -->
			<view class="bottomLay">

				<view class="group">
					<image src="/static/index/groupIcon.png" class="groupIcon" mode="widthFix"></image>
					<text class="lable">店铺导航群：</text>
					<view class="groupName" v-if="shopsDetail.customer_service.length>0">
					<scroll-text 
					      :textList="shopsDetail.customer_service" 
					      :showCount="1" 
					      :speed="2"
						  :itemHeight='32'
					      @copy="onCopy"
					    ></scroll-text>
					</view>
				</view>
				<view class="bnt1" @click="toggleBT">
					补图
				</view>
			</view>
		</view>
		<view class="headerSearch">
			<view class="searchBox">
				<uni-icons type="search" color="#fff" size="20"></uni-icons>
				<input type="text" v-model.trim="value1" @blur="resetList" />
			</view>
			<!-- <image class="searchIcon" src="/static/index/searchIcon.png" mode="widthFix" @click="linkUrl(`/pages/index/storeSearchAndRetrieval?value=${value1}`)"></image> -->
		</view>
		<view class="bookLay">
			<image src="/static/index/bookBg.png" class="bookBg" mode="widthFix"></image>

			<view class="tabLay">
				<view :class="tabOptionIndex==0?'tabOption action':'tabOption'" @click="tabOptionIndexFn(0)">
					<image v-if="tabOptionIndex==0" src="/static/index/zhua.png" mode="widthFix"></image>
					<view class="txt">
						扭蛋
					</view>
				</view>
				<view :class="tabOptionIndex==1?'tabOption action':'tabOption'" @click="tabOptionIndexFn(1)">
					<image v-if="tabOptionIndex==1" src="/static/index/zhua.png" mode="widthFix"></image>
					<view class="txt">
						直购
					</view>
				</view>
				<view class="tabOption" @click="linkUrl('/pages/index/watermarkPreview?shopId='+shopId)">
					<view class="txt">
						全部
					</view>
				</view>
			</view>
			<view class="bookBox">
				<view class="tipTxt">
					本店已收录{{total}}张
				</view>
				<view class="pictureBox">
					<noData v-if="machinesList.length === 0 && !loading"></noData>
					<template v-else>
						<view class="pictureItem" v-for="(item,index) in machinesList" :key="index">
							<pictureDisplay :dataItem="item" v-if="item.showtype==1">
								<template #titletxt>
									<view class="itemTitle">
										{{item.shop_name}}
									</view>
								</template>
							</pictureDisplay>
							<pictureDisplayTow :dataItem="item" v-else>
								<template #titletxt>
									<view class="itemTitle">
										{{item.shop_name}}
									</view>
								</template>
							</pictureDisplayTow>
							<!-- <pictureDisplay>
								<template #titletxt>
									<view class="itemTitle">
										全职高手
									</view>
								</template>
							</pictureDisplay> -->
						</view>
					</template>
					<!-- <view class="pictureItem">
						<pictureDisplayTow class="pictureDisplayTow">
							<template #titletxt>
								<view class="itemTitle">
									全职高手
								</view>
							</template>
						</pictureDisplayTow>
					</view> -->
				</view>
			</view>
			<view class="pagination">
				<view class="pagLeft">
					<image class="pageIcon" v-if="page==1" src="/static/index/pagIcon2.png" mode=""></image>
					<image class="pageIcon" v-else style="transform: scaleX(-1);" src="/static/index/pagIcon1.png"
						mode="" @click="currentFn(0);"></image>
				</view>
				<view class="pagContent">
					{{page}}/{{totalPages}}
				</view>
				<view class="pagRight">
					<image class="pageIcon" v-if="page==totalPages" style="transform: scaleX(-1);"
						src="/static/index/pagIcon2.png" mode=""></image>
					<image class="pageIcon" v-else src="/static/index/pagIcon1.png" mode="" @click="currentFn(1);">
					</image>

				</view>
			</view>
		</view>
		<uni-popup ref="popup" safeArea>
			<view class="popup-content">

				<image class="xfbg3" src="/static/index/stickyNote.png" mode="aspectFit"></image>
				<view class="xfText">
					<view class="title">
						温馨提示
						<!-- 关注店铺 -->
					</view>
					<view class="text">
						补图成功<br />
						请去背包领图哦！！！
						<!-- 关注店铺获取上新信息 -->
					</view>
				</view>
				<view class="bnt" @click="closePop">
					<image src="/static/index/tagIcon.png" class="bntBg" mode="aspectFit"></image>
					<view class="txt">
						知道了
					</view>
				</view>
				<!-- 立即关注 -->
			</view>
		</uni-popup>
		<uni-popup ref="popupBT" safeArea backgroundColor="#fff" borderRadius="38px 38px 0 0">
			<view class="popupBTContent">
				<scroll-view style="height: 668rpx;"scroll-y="true" refresher-enabled="true" @scroll="scroll"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#fff"
				 @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scrolltolower="scrolltolower">
					<view class="pictureBox">
						<noData v-if="repairImagesList.length === 0 && !loadingImg"></noData>
						<template v-else>
						<view class="pictureItem" v-for="(item,index) in repairImagesList" :key="index">
							<cardBag :cardWidth='208' :cardHeight='208' :tagWidth='70' :cardData="item">
								<template #option>
									<view class="optionLay" @click="optionFN(item)">
										<uni-icons class="optionIcon" v-if="item.action" type="checkbox-filled"
											color="#fff" size="14"></uni-icons>
										<uni-icons class="optionIcon" v-else type="circle" color="#fff"
											size="14"></uni-icons>
									</view>
								</template>
								<template #infoMore>
									<view class="infoMore">
										<view class="priceTxt ">
											<text class="unit">￥</text>
											200
										</view>
										<!-- <view class="priceTxt forward">
											<view class="txt">
												转发价
											</view>
											<text class="unit">￥</text>
											200
										</view> -->

									</view>
								</template>
							</cardBag>
						</view>
						<uni-load-more :status="loadingImg ? 'loading' : noMoreDataImg ? 'noMore' : 'more'"	iconType="auto"></uni-load-more>
						</template>
					</view>
				</scroll-view>
				<view class="playWrap">
					<!-- <view class="all" @click="allType=!allType">
						<uni-icons class="optionIcon" :type="allType?'checkbox-filled':'circle'" color="#3CC599"
							size="18"></uni-icons>
						全选
					</view> -->
					<view class="infoBox">
						<view class="infoTxt">
							<view class="lable">
								<!-- 购买2张 -->
							</view>
							<view class="value">
								<!-- <view class="lable">合计：</view> -->
								<view class="priceTxt ">
									<text class="unit">￥</text>
									200
								</view>
							</view>
						</view>
					</view>
					<view class="bnt">
						选好了
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageMetaShow: false,
				tabOptionIndex: 0,
				list: [],
				shopId: '',
				shopsDetail: {},
				is_followed: 0,
				broadcastStyle2: {
					speed: 20,
					font_size: "32", //字体大小(rpx)
					text_color: "#333", //字体颜色
					back_color: "red", //背景色
				},
				imgdata: [],
				machinesList: [],
				totalPages: 0,
				page: 1, // 当前页码
				page_size: 2, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false,// 是否没有更多数据
				
				triggered: false,
				_freshing: false,
				pageImg:1,
				pageImg_size:12,
				totalImg: 0, // 总数据量
				loadingImg: false, // 是否正在加载
				noMoreDataImg: false,// 是否没有更多数据
				repairImagesList:[],//补图列表
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				textList: [/* 
				        "欢迎使用循环滚动文字复制组件",
				        "点击任意文本项可复制内容",
				        "基于UniApp和微信小程序开发",
				        "设计简洁优雅，功能实用",
				        "可以自定义文本内容和样式" */
				      ],
					  value1:''
			};
		},
		onLoad(e) {
			this.shopId = e.shopId || '2'; //临时
			this.getShopsDetailFn()
			this.getMachinesListFn()
			this._freshing = false;
			this.shopsRepairImagesFn();
			// this.toggle();
		},
		methods: {
			linkUrl(url){
				uni.navigateTo({
					url
				})
			},
			testClick(e) {
				console.log(e)
			},
			tabOptionIndexFn(index) {
				this.tabOptionIndex = index;
				this.resetList();
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('center')
			},
			closePop() {
				this.$refs.popup.close()
			},
			toggleBT(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupBT.open('bottom')
			},
			closePopBT() {
				this.$refs.popupBT.close()
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetImgList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreDataImg || this.loadingImg) return
			
				// 页码增加并获取下一页数据
				this.pageImg++
				this.shopsRepairImagesFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			openFn(item) {
				item.type = !item.type
			},

			optionFN(item) {
				item.action = !item.action
			},
			// 通过ID获取店铺详情
			getShopsDetailFn() {
				this.$http('/v1/shops/detail/' + this.shopId).then(res => {
					console.log(res, "获取账号列表");
					if (res.code == 0) {
						this.shopsDetail = res.data.shop;
						this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})
			},
			// 关注
			shopsFollow() {
				this.$http('/v1/shops/follow', {
					"shop_id": Number(this.shopId),
					"follow": this.is_followed==1?0:1, //// 0=取消关注, 1=关注
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.getShopsDetailFn()
					} else {}
					this.$showToast(res.msg)
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getMachinesListFn()
			},
			getMachinesListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					// machines/list
					this.$http('/v1/machines/list-by-conditions', {
						page: this.page,
						page_size: this.page_size,
						keyword:this.value1,
						type: this.tabOptionIndex,
						shop_id: Number(this.shopId),
					},'post').then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							// if (this.page === 1) {
							this.machinesList = data.list || []
							// } else {
							// 后续页，合并数据
							// this.machinesList = [...this.machinesList, ...(data.list || [])]
							// }

							// 更新总数据量
							this.total = data.total || 0
							// 总页数
							this.totalPages = Math.ceil(this.total / this.page_size);
							// 判断是否还有更多数据
							this.noMoreData = this.machinesList.length >= this.total
							// this.machinesList = res.data.list;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					// uni.stopPullDownRefresh();
				}
			},
			// 分页操作
			currentFn(type) {
				if (type == 0) {
					this.page--
				} else {
					this.page++
				}
				this.getMachinesListFn()
			},
			resetImgList(){
				this.pageImg = 1
				this.noMoreDataImg = false
				this.shopsRepairImagesFn()
			},
			// 补图列表
			shopsRepairImagesFn(){
					// 防止重复请求
					if (this.loadingImg) return;
				
					// 设置加载状态
					this.loadingImg = true;
					uni.showLoading({
						title: '加载中...'
					})
					try {
						this.$http('/v1/shops/repair-images', {
							page: this.pageImg,
							page_size: this.pageImg_size,
							shop_id: this.shopId,
						}).then(res => {
							console.log(res);
							if (res.code === 0) {
								const
									data = res.data;
								// 如果是第一页，直接赋值
								if (this.pageImg === 1) {
								this.repairImagesList = data.list || []
								} else {
								// 后续页，合并数据
								this.repairImagesList = [...this.repairImagesList, ...(data.list || [])]
								}
				
								// 更新总数据量
								this.totalImg = data.total || 0
								// 总页数
								// 判断是否还有更多数据
								this.noMoreDataImg = this.repairImagesList.length >= this.totalImg
								// 把下拉状态复位
								this.triggered = false;
								this._freshing = false;
							} else {
								this.$showToast(res.msg)
							}
						})
				
					} catch (error) {
						console.error('请求失败:', error)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					} finally {
						// 重置加载状态
						this.loadingImg = false
						uni.hideLoading();
						// uni.stopPullDownRefresh();
					}
				
			}
			// {{apiurl}}v1/shops/repair-images?shop_id=123&page=1&page_size=20
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.indexBg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -2;
			top: 0;
		}

		.mainHeader {
			padding-left: 38upx;
			margin-bottom: 26upx;
			position: relative;

			.headerImg {
				width: 406upx;
				position: absolute;
				top: 0;
				left: 56upx;
			}
		}

		.storeLay {
			width: 710rpx;
			// min-height: 294rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(158, 158, 158, 0.5);
			border-radius: 20rpx;
			margin: 0 auto;
			position: relative;
			z-index: 2;
			padding: 24upx 26upx;

			.storeHeader {
				@include flexLayout(center, space-between);

				.headerLeft {
					@include flexLayout(center, center);

					.title {
						font-family: SourceHanSansSC;
						font-weight: bold;
						font-size: 36rpx;
						color: #454545;
						line-height: 52rpx;
						margin-right: 20upx;
					}

					.hotNum {
						@include flexLayout(center, center);
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 14rpx;
						color: #FF8181;
						line-height: 20rpx;

						.hotIcon {
							@include setwh(32rpx, 28rpx);
							margin-right: 10upx;
						}
					}
				}

				.headerRight {
					position: relative;
					@include flexLayout(center);

					.userImg {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						position: absolute;
						top: -80upx;
						right: 160upx;
						background-color: #F3F3F3;
						border: 2upx solid #FFFFFF;
					}

					.hiIcon {
						@include setwh(48rpx, 40rpx);
						margin-right: 12upx
					}

					.bnt {
						@include setwh(100rpx, 40rpx);
						background: linear-gradient(90deg, #FFC4D4 0%, #FE91B0 100%);
						border-radius: 22rpx;
						font-family: SourceHanSansSC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 40upx;
					}
				}
			}

			.subTitle {
				font-family: SourceHanSansSC;
				font-weight: 500;
				font-size: 22rpx;
				color: #979797;
				line-height: 32rpx;
				margin-top: 20upx;
			}

			.txt {
				font-family: SourceHanSansSC;
				font-weight: 500;
				font-size: 22rpx;
				color: #555555;
				line-height: 32rpx;
				margin-top: 20upx;
			}

			.bottomLay {
				@include flexLayout(center, space-between);
				padding-top: 20rpx;
			}

			.group {
				@include flexLayout(center);

				.groupIcon {
					@include setwh(36rpx, 26rpx);
				}

				.lable {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 20rpx;
					color: #747474;
					line-height: 30rpx;
					padding: 0 14upx 0 8upx;
				}

				::v-deep .groupName {
					min-width:150upx ;
					.text-content{
						
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 22rpx;
					color: #676767;
					// line-height: 32rpx;
					}
				}
			}

			.bnt1 {
				@include setwh(106rpx, 44rpx);
				margin-left: auto;
				border-radius: 24rpx;
				border: 2rpx solid #FF95B3;
				line-height: 44upx;
				text-align: center;
				font-size: 20rpx;
				color: #FF95B3;
			}
		}
.headerSearch {
			@include flexLayout(center, space-between);
			margin: 24upx auto 38upx;
				width:706rpx;
			.searchBox {
				@include flexLayout(center);
				width:100%;
				height: 74rpx;
				padding-left: 34upx;
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(173, 173, 173, 0.5);
				border-radius: 38rpx;
				backdrop-filter: blur(16px);

				input {
					width: 80%;
					padding-left: 20upx;
					color: #fff;
				}
			}
		}
		.bookLay {
			// margin-top: 70upx;
			position: relative;

			.bookBg {
				position: absolute;
				@include setwh(730rpx, 0);
			}

			.tabLay {
				position: absolute;
				right: 16upx;
				padding-top: 84upx;

				.tabOption {
					writing-mode: vertical-rl;
					font-family: STYuanti-SC, STYuanti-SC;
					font-weight: bold;
					font-size: 29rpx;
					color: #FFCACA;
					text-align: center;
					padding: 32upx 8upx 46upx;
					background: #FFEAEA;
					box-shadow: 6rpx 4rpx 8rpx 0rpx rgba(140, 140, 140, 0.5);
					border-radius: 0 12rpx 12rpx 0;
					line-height: 1;
					letter-spacing: 14upx;
					position: relative;
					animation: all 1s;

					image {
						position: absolute;
						top: 8upx;
						right: 8upx;
						width: 38upx;
						height: 0;
						z-index: 1;
					}

					.txt {
						position: relative;
						z-index: 2;
					}
				}

				.tabOption+.tabOption {
					margin-top: 2upx;
				}

				.action {
					padding: 26upx 15upx 32upx;
					// line-height: 50rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #D06363;
					background: #FFBCBC;
					letter-spacing: 18upx;
					animation: all 1s;
				}
			}

			.bookBox {
				position: absolute;
				z-index: 5;
				padding-left: 38upx;
				padding-top: 78upx;

				.tipTxt {
					font-family: SourceHanSansSC;
					font-weight: bold;
					font-size: 21rpx;
					color: #D06363;
				}

				.pictureBox {
					width: 516upx;
					margin-left: 56upx;
					margin-top: 20upx;

					::v-deep .pictureItem {
						margin-bottom: 24upx;

						.imgBox,
						.contentRight {
							height: 252upx;
						}

						.introduction {
							top: 204upx;

							// width: 91%;
							.txt {
								width: 60%;
							}

							.tag {
								padding: 4upx 6upx;
							}
						}

						.shopLay {
							padding: 12rpx 24rpx 0 20rpx;
						}

						.itemTitle {
							font-family: SourceHanSansSC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.contentLeft {
							width: 252upx;
						}

						.contentRight {
							width: 232upx;

							image {
								@include setwh(114upx, 114upx)
							}
						}
					}

					/* ::v-deep .pictureDisplayTow{
						.introduction{
							top: 204upx;
							width: 444upx;
					}*/
				}
			}

			.pagination {
				position: absolute;
				top: 830upx;
				right: 242rpx;
				z-index: 3;
				@include flexLayout(center, center);

				.pageIcon {
					@include setwh(32upx, 36upx);
					padding: 0 40upx;
				}

				.pagContent {
					width: 104rpx;
					height: 44rpx;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	@-webkit-keyframes growUp {
		from {
			transform: translateY(100%);
			/* 从底部开始 */
			opacity: 0;
			/* 开始时完全透明 */
		}

		to {
			transform: translateY(0);
			/* 移动到原始位置 */
			opacity: 1;
			/* 结束时完全不透明 */
		}
	}

	.popup-content {
		position: relative;
		overflow: hidden;
		@include flexLayout(center, center);
		flex-direction: column;

		// animation: growUp  2s forwards;
		// height: 0;
		.xfbg3 {
			@include setwh(606upx, 542upx);
			// @include setwh(100%,100%,);
			margin: 0 auto;
			// position: relative;
			// z-index: 0;
		}

		.xfText {
			@include setwh(606upx, 542upx);
			@include flexLayout(center);
			// background-color: #979797;
			padding-top: 116upx;
			flex-direction: column;
			font-family: kkt;
			position: absolute;
			z-index: 9;
			top: 0;

			.title {
				font-weight: normal;
				font-size: 32rpx;
				color: #9E4C4C;
				line-height: 46rpx;
				// padding-top: 32upx;
			}

			.text {
				width: 312upx;
				padding-top: 85upx;
				font-weight: normal;
				font-size: 30rpx;
				color: #9E4C4C;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.bnt {
			@include setwh(230upx, 104upx);
			
			text-align: center;
			position: relative;
			bottom: 204upx;
			z-index: 10;
			.txt{
				line-height: 136upx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #9E4C4C;
				@include positionCenter;
				// z-index: -1;
			}
			.bntBg {
				@include positionCenter;
				/* position: absolute;
				top: 0;
				left: 0;
				right: 0;*/
				z-index: 0; 
				@include setwh(230upx, 104upx);
			}
		}
	}

	.popupBTContent {
		// padding: 74upx 20upx 0;
		padding-top: 74upx;
		padding-bottom: 100upx;

		.pictureBox {
			// width: 600upx;
			margin-left: 20upx;
			padding-bottom: 40upx;
			@include flexLayout(center, flex-start);
			flex-wrap: wrap;
			column-gap: 8rpx;
			row-gap: 28upx;
			position: relative;
			z-index: 3;
			::v-deep .nodataLay{
				width:calc(100vw - 20upx);
			}
			.optionLay {
				position: absolute;
				top: 0;
				left: 0;
				width: 40rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.43);
				border-radius: 0rpx 0rpx 10rpx 0rpx;

				.optionIcon {
					@include positionCenter;
					line-height: 1;
				}
			}

			.infoMore {
				@include flexLayout(flex-end, flex-end);
				padding-top: 11upx;
				min-height: 28upx;

				.priceTxt {
					@include flexLayout(center);
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FF7994;

					// line-height: 32rpx;
					.unit {
						font-size: 18rpx;
						// line-height: 1;
					}
				}

				.forward {
					color: #828282;
					font-size: 14rpx;

					.txt {
						margin-right: 6upx;
					}

					.unit {
						font-size: 16rpx;
						// line-height: 1;
					}
				}
			}
		}
	}

	.playWrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		height: 187rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 29rpx 4rpx rgba(210, 210, 210, 0.5);
		border-radius: 29rpx 29rpx 0rpx 0rpx;
		@include flexLayout(center, space-between);
		padding: 32upx 58upx 70upx 48upx;
		z-index: 9;

		.all {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 24rpx;
			color: #656565;
			line-height: 32rpx;

			.optionIcon {
				margin-right: 18upx;
			}
		}

		.infoBox {
			.infoTxt {
				@include flexLayout(center, flex-start);

				.lable {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 24rpx;
					color: #656565;
					line-height: 32rpx;
				}

				.value {
					@include flexLayout(center, center);
					margin-left: 38upx;

					.priceTxt {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 38rpx;
						color: #FF7994;
						line-height: 48rpx;

						.unit {
							font-weight: 400;
							font-size: 28rpx;
						}

						.delLin {
							position: relative;

							&::before {
								content: '';
								@include positionCenter;
								background-color: #FF7994;
								width: 100%;
								height: 4upx;
							}
						}
					}
				}
			}
		}

		.bnt {
			width: 144rpx;
			height: 56rpx;
			background: #FF7994;
			border-radius: 32rpx;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
		}
	}
</style>